<%--
  Created by IntelliJ IDEA.
  User: 12965
  Date: 2023/7/13
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/register1.css" rel="stylesheet">
</head>

<body>


<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span><a href="login.jsp">登录</a>
        <div id="errorMsg" style="text-align: center;color: red">${register_msg}</div>
    </div>
    <form id="reg-form" action="/project123/registerServlet" method="post">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名格式错误</span>
                    <span id="username_err1" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式错误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode" style="vertical-align: center">
                    <img id="checkCodeImg" src="/project123/checkCodeServlet">
                    <a href="#" id="changeImg" >看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>

<script>
    /*
    * 表单验证
    *   1.当输入框失去焦点时，验证输入内容是否符合要求
    *         (1)获取表单输入框
    *               var usernameInput=document.getElementById("username");
    *         (2)绑定onblur(鼠标移开)事件
    *               usernameInput.onblur=fuction(){}
    *         (3)获取输入内容
    *               var username=usernameInput.value.trim();
    *               trim()是用来去除空白符的
    *         (4)判断是否符合规则
    *               var usernameReg=/^\w{6,12}$/; //正则表达式
    *         (5)如果不符合规则，则显示错误提示信息
    *   2.当点击注册按钮时，判断所有输入框的内容是否都符合要求
    *         (1)获取表单对象
    *               var regForm=document.getElementById("reg-form");
    *         (2)为表单对象绑定onsubmit
    *               regForm.onsubmit=fuction(){}
    *         (3)判断所有输入框是否符合要求，如果符合要求，则返回true，如果不符合要求，则返回false
    * */

    /*****************************用户名************************************/
        //(1)获取表单输入框
    var usernameInput=document.getElementById("username");
    //(2)绑定onblur(鼠标移开)事件
    usernameInput.onblur=checkusername;
    function checkusername() {
        //获取用户输入用户名
        var username = usernameInput.value.trim();

        //判断用户名是否符合规则：长度6~12
        //     var flag=username.length >= 6 && username.length <= 12;
        let reg=/^\w{6,12}$/;
        let flag=reg.test(username);
        if (flag) {
            //符合规则
            document.getElementById('username_err').style.display = 'none';
        } else {
            document.getElementById('username_err').style.display = '';
        }
        return flag;
    }

    /*****************************密码************************************/

        //(1)获取表单输入框
    var passwordInput=document.getElementById("password");
    //(2)绑定onblur(鼠标移开)事件
    passwordInput.onblur=checkpassword;
    function checkpassword(){
        //获取用户输入密码
        var password= passwordInput.value.trim();
        // var flag=password.length >= 6 && password.length <= 12;
        let reg=/^\w{6,12}$/;
        let flag=reg.test(password);
        //判断密码是否符合规则：长度6~12
        if(flag){
            //符合规则
            document.getElementById('password_err').style.display='none';
        }else {
            document.getElementById('password_err').style.display='';
        }
        return flag;
    }


    /*****************************手机号************************************/
/*

        //(1)获取表单输入框
    var telInput=document.getElementById("tel");
    //(2)绑定onblur(鼠标移开)事件
    telInput.onblur=checktel;
    function checktel(){
        //获取用户输入手机号
        var tel= telInput.value.trim();
        // var flag=tel.length==11;
        let reg=/^[1]\d{10}$/;
        let flag=reg.test(tel);
        //判断手机号是否符合规则：长度6~12
        if(flag){
            //符合规则
            document.getElementById('tel_err').style.display='none';
        }else {
            document.getElementById('tel_err').style.display = '';
        }
        return flag;
    }
*/
    /***************************验证码********************************************/
    document.getElementById("changeImg").onclick=function (){

        document.getElementById("checkCodeImg").src="/project123/checkCodeServlet?"+new Date().getMilliseconds();
    }
    document.getElementById("checkCodeImg").onclick=function (){

        document.getElementById("checkCodeImg").src="/project123/checkCodeServlet?"+new Date().getMilliseconds();
    }

    /***************************表单验证********************************************/

    //获取表单对象
    var regForm = document.getElementById("reg-form");

    //绑定onsubmit事件
    regForm.onsubmit=function (){
        //挨个判断每一个是否符合要求
        var flag=checkusername()&&checkpassword();
        return flag;

    }

    /***************************AJAX********************************************/


        //1.给用户名输入狂绑定失去焦点事件
        document.getElementById("username").onblur=function (){
        //2.发送AJAX请求
        //获取用户名的值
        var username=this.value;


        var xhttp;
        if(window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
        }else{
            //code for IE6,IE5
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
            //2.发送请求
            xhttp.open("GET","http://localhost:8080/Maven_Demo/selectUserServlet?username="+username);
            xhttp.send();
        }

        //3.获取响应
        xhttp.onreadystatechange=function (){
            if(this.readyState==4&&this.status==200){
                //判断
                if(this.responseText=="true"){
                    //用户名存在,提示信息
                    document.getElementById("username_err1").style.display='';
                }else{
                    //用户名不存在
                    document.getElementById("username_err1").style.display='none';
                }
            }
        }
</script>

</script>
</body>
</html>
